<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas1" width="600" height="600"></canvas>
<br>
<canvas id="canvas2" width="600" height="600"></canvas>
<video id="video" width="800" height="" src="1.mp4" controls="controls"></video>
</body>
<script>
    var canvas1 = document.getElementById('canvas1')
    var ctx1 = canvas1.getContext('2d')
    //绘制图像
    //ctx.drawImage(图像对象,x坐标,y坐标)
    //ctx.drawImage(图像对象,x坐标,y坐标,宽度,高度)
    //ctx.drawImage(图像对象,图像裁剪位置x,图片裁剪位置y,裁剪宽度,裁剪高度,x坐标,y坐标,宽度,高度)
    var img = new Image()
    img.src = '1.jpg'
    img.onload = () => {
        //这里应该是先裁剪，得到裁剪的新图片（新的内容和新尺寸），再进行位置和大小的设置
        ctx1.drawImage(img, 50, 100, 500, 500, 50, 50, 300, 400)
    }
</script>
<script>
    var video = document.getElementById('video')
    var canvas2 = document.getElementById('canvas2')
    var ctx2 = canvas2.getContext('2d')
    var interId
    video.onplay = () => {
        interId = setInterval(() => {
            ctx2.clearRect(0, 0, 600, 600)
            ctx2.fillRect(0, 0, 600, 600)
            ctx2.drawImage(video, 0, 0, 600, 500)
            ctx2.font = '20px 微软雅黑'
            ctx2.strokeStyle = '#999'
            ctx2.strokeText('姜皓育', 100, 20)
        }, 16)
    }
    video.onpause = () => {
        clearInterval(interId)
    }
</script>
</html>
